<template>
  <div class="dashboard-container">
    <div class="header">
      <h1>统计大屏</h1>
    </div>

    <div class="stats-grid">
      <!-- 客户总数 -->
      <el-card class="stat-card total">
        <div class="stat-content">
          <h2>客户总数</h2>
          <div class="stat-value">{{ totalList.countSumBuyerInfo }}</div>
        </div>
      </el-card>

      <!-- 商品总数 -->
      <el-card class="stat-card goods">
        <div class="stat-content">
          <h2>商品总数</h2>
          <div class="stat-value">{{ totalList.countSumGoodsInfo }}</div>
        </div>
      </el-card>

      <!-- 订单总数 -->
      <el-card class="stat-card orders">
        <div class="stat-content">
          <h2>订单总数</h2>
          <div class="stat-value">{{ totalList.countSumOrderInfo }}</div>
        </div>
      </el-card>
      <!-- 物流数量 -->
      <el-card class="stat-card logistics">
        <div class="stat-content">
          <h2>物流总数</h2>
          <div class="stat-value">{{ totalList.countSumLogisticsInfo }}</div>
        </div>
      </el-card>
    </div>

    <!-- 详细状态统计 -->
    <div class="detail-stats">
      <el-card class="detail-card">
        <h3>订单信息</h3>
        <ul class="status-list">
          <li v-for="(item, key) in totlaDetailList" :key="key" class="status-item">
            <span class="status-label">{{ item.label }}：</span>
            <span class="status-value">{{ item.value }}</span>
          </li>
        </ul>
      </el-card>
    </div>

    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart />
        </div>
      </el-col>
    </el-row>
  </div>

</template>

<script>
  import {countDetailTotal, countSum} from "@/api/business/goodsInfo";
  import BarChart from './dashboard/BarChart'

  export default {
    name: "Index",
    components: {
      BarChart
    },
    data() {
      return {
        // 版本号
        version: "3.9.0",
        totalList: {
          buyerInfoTotal: 0,
          goodInfoTotal: 0,
          orderInfoTotal: 0,
          logisticsTotal: 0,
        },
        totlaDetailList: [
          {label: '草稿订单量', value: 0},
          {label: '已发送订单量', value: 0},
          {label: '已发货订单量', value: 0},
          {label: '已完成订单量', value: 0}
        ]
      }
    },
    created() {
      this.countSumTotals();
    },
    methods: {
      countSumTotals() {
        countSum().then(res => {
          this.totalList = res.data;
        }),
          countDetailTotal().then(res => {
            const statsData = res.data;
            this.totlaDetailList = [
              {label: '草稿订单量', value: statsData['草稿订单量'] || 0},
              {label: '已发送订单量', value: statsData['已发送订单量'] || 0},
              {label: '已发货订单量', value: statsData['已发货订单量'] || 0},
              {label: '已完成订单量', value: statsData['已完成订单量'] || 0}
            ];
          })
      },
      handleSetLineChartData(type) {
        this.lineChartData = lineChartData[type]
      },
      goTarget(href) {
        window.open(href, "_blank")
      }
    }
  }
</script>

<style scoped>
  .dashboard-container {
    padding: 20px;
    background-color: #f5f7fa;
    min-height: 100vh;
  }

  .header {
    margin-bottom: 30px;
  }

  .header h1 {
    font-size: 24px;
    color: #333;
    font-weight: bold;
  }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
  }

  .stat-card {
    border-radius: 8px;
    text-align: center;
    padding: 20px;
  }

  .stat-card.total {
    border-top: 4px solid #409EFF;
  }

  .stat-card.goods {
    border-top: 4px solid #67C23A;
  }

  .stat-card.orders {
    border-top: 4px solid #E6A23C;
  }

  .stat-card.logistics {
    border-top: 4px solid #FF0000;
  }
  .stat-content h2 {
    font-size: 18px;
    color: #606266;
    margin-bottom: 15px;
  }

  .stat-value {
    font-size: 36px;
    font-weight: bold;
    color: #303133;
  }

  .detail-card {
    border-radius: 8px;
  }

  .detail-card h3 {
    font-size: 18px;
    color: #303133;
    margin-bottom: 15px;
    font-weight: bold;
  }

  .status-list {
    list-style: none;
    padding: 0;
  }

  .status-item {
    padding: 12px 0;
    border-bottom: 1px solid #ebeef5;
    display: flex;
    justify-content: space-between;
  }

  .status-item:last-child {
    border-bottom: none;
  }

  .status-label {
    color: #606266;
  }

  .status-value {
    color: #303133;
    font-weight: bold;
  }
</style>

